<!-- 404错误页面组件 - 处理页面未找到的情况 -->
<template>
    <!-- 404错误页面容器 -->
    <div class="not-found-page">
        <!-- 错误内容容器 -->
        <div class="error-content">
            <!-- 404图标区域 -->
            <div class="error-icon">
                <el-icon>
                    <Search />
                </el-icon>
            </div>

            <!-- 错误标题 -->
            <h1 class="error-title">404</h1>

            <!-- 错误副标题 -->
            <h2 class="error-subtitle">页面未找到</h2>

            <!-- 错误描述 -->
            <p class="error-description">
                抱歉，您访问的页面不存在或已被移动。
                <br>
                请检查网址是否正确，或使用下面的导航选项。
            </p>

            <!-- 导航按钮区域 -->
            <div class="navigation-actions">
                <!-- 返回上一页按钮 -->
                <el-button type="primary" @click="goBack" class="back-btn">
                    <el-icon>
                        <ArrowLeft />
                    </el-icon>
                    返回上一页
                </el-button>

                <!-- 返回首页按钮 -->
                <el-button @click="goHome" class="home-btn">
                    <el-icon>
                        <House />
                    </el-icon>
                    返回首页
                </el-button>

                <!-- 搜索按钮 -->
                <el-button @click="showSearch" class="search-btn">
                    <el-icon>
                        <Search />
                    </el-icon>
                    搜索内容
                </el-button>
            </div>

            <!-- 快速链接区域 -->
            <div class="quick-links">
                <h3 class="links-title">快速导航</h3>
                <div class="links-grid">
                    <el-button v-for="link in quickLinks" :key="link.path" text @click="navigateTo(link.path)"
                        class="quick-link">
                        <el-icon>
                            <component :is="link.icon" />
                        </el-icon>
                        {{ link.name }}
                    </el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
// ==================== 导入依赖 ====================

/**
 * 导入Vue 3组合式API
 * @description 用于响应式数据管理和生命周期管理
 */
import { ref, onMounted } from 'vue'

/**
 * 导入Vue Router
 * @description 用于页面导航和路由信息获取
 */
import { useRouter, useRoute } from 'vue-router'

/**
 * 导入Element Plus图标组件
 * @description 用于界面图标显示
 */
import {
    Search,
    ArrowLeft,
    House,
    Document,
    User,
    Message,
    Collection,
    Clock
} from '@element-plus/icons-vue'

// ==================== 响应式数据 ====================

/**
 * 快速导航链接列表
 * @description 提供常用页面的快速导航选项
 */
const quickLinks = ref([
    {
        name: '博客首页',
        path: '/blog',
        icon: 'Document'
    },
    {
        name: '关于我',
        path: '/about',
        icon: 'User'
    },
    {
        name: '留言板',
        path: '/guestbook',
        icon: 'Message'
    },
    {
        name: '友链',
        path: '/friends',
        icon: 'Collection'
    },
    {
        name: '时间线',
        path: '/timeline',
        icon: 'Clock'
    }
])

// ==================== 获取实例 ====================

/**
 * 获取路由实例
 * @description 用于页面导航操作
 */
const router = useRouter()

/**
 * 获取当前路由实例
 * @description 用于获取当前路由信息
 */
const route = useRoute()

// ==================== 生命周期钩子 ====================

/**
 * 组件挂载后的处理
 * @description 记录404错误信息和设置页面标题
 */
onMounted(() => {
    // 设置页面标题
    document.title = '404 - 页面未找到'

    // 记录404错误信息
    console.warn('404错误:', {
        path: route.path,
        fullPath: route.fullPath,
        timestamp: new Date().toISOString(),
        userAgent: navigator.userAgent
    })

    // 可以发送错误到监控服务
    // sendErrorToMonitoring({
    //   type: '404',
    //   path: route.path,
    //   timestamp: new Date().toISOString()
    // })
})

// ==================== 交互方法 ====================

/**
 * 返回上一页
 * @description 使用浏览器历史记录返回上一页
 */
const goBack = () => {
    if (window.history.length > 1) {
        router.go(-1)
    } else {
        // 如果没有历史记录，跳转到首页
        router.push('/')
    }
}

/**
 * 返回首页
 * @description 导航到网站首页
 */
const goHome = () => {
    router.push('/')
}

/**
 * 显示搜索功能
 * @description 跳转到搜索页面或显示搜索框
 */
const showSearch = () => {
    // 这里可以实现搜索功能
    // 暂时跳转到博客页面，用户可以搜索内容
    router.push('/blog')
}

/**
 * 导航到指定页面
 * @description 根据路径导航到指定页面
 * @param path 目标路径
 */
const navigateTo = (path: string) => {
    router.push(path)
}
</script>

<style scoped lang="scss">
// 导入404错误页面样式
@use '../../assets/styles/components/errors/_not-found';
</style>
